// 权限拦截
import router from '@/router' //引入路由实例
import store from '@/store' //引入vuex store实例
import NProgress from 'nprogress' //引入一份进度条插件
import 'nprogress/nprogress.css' //引入进度条样式


const whiteList = ['/login', '404'] //定义白名单，所有不受权限控制的页面

// 路由的前置守卫
router.beforeEach(async(to, from, next) => {
    NProgress.start() //开启进度条
        // 首先判断有无token
    if (store.getters.token) {
        // 如果有token，继续判断是不是去登录页面
        if (to.path === '/login') {
            next('/') //跳到主页 
        } else {
            //为了不要每次放行都要获取用户资料
            // 如果当前vuex中有用户的资料的id的话，表示已经有了用户资料
            if (!store.getters.userId) {
                // 如果没有id这个值 才会调用 vuex的获取资料的action
                // async函数所return的内容用await就可以接收
                const { roles } = await store.dispatch('user/getUserInfo')
                    // 需要根据用户资料获取数据的话 这里必须改成同步
                    // 筛选用户的可用路由
                const routes = await store.dispatch('permission/filterRoutes', roles.menus) //筛选得到当前用户可用的动态路由
                    // console.log(routes);
                    // routes就是筛选得到的动态路由
                    // 动态路由添加到路由表中 默认的路由表 只有静态路由 没有动态路由
                router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // 添加动态路由到路由表  铺路
                    // 添加完动态路由之后
                next(to.path) // 相当于跳到对应的地址  相当于多做一次跳转 为什么要多做一次跳转
                    // 进门了，但是进门之后我要去的地方的路还没有铺好，直接走，掉坑里，多做一次跳转，再从门外往里进一次，跳转之前 把路铺好，再次进来的时候，路就铺好了
            } else {
                next()
            }
        }
    } else {
        // 如果没有token
        if (whiteList.indexOf(to.path) > -1) {
            // 如果找到了，表示在名单里面
            next()
        } else {
            next('/login') //跳到登录
        }
    }
    NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
})

// 路由的后置守卫
router.afterEach(function() {
    NProgress.done() // 关闭进度条
})